import AdBanner from '@/components/AdBanner';
import { tokenStorage } from '@/utils/storage';
import {
  ControlFilled,
  ControlOutlined,
  ControlTwoTone,
  CustomerServiceTwoTone,
  EditTwoTone,
  FilterTwoTone,
  IdcardTwoTone,
  LeftSquareTwoTone,
  MessageTwoTone,
  RightSquareTwoTone,
  SafetyCertificateTwoTone,
} from '@ant-design/icons';
import { css } from '@emotion/react';
import { history, Link, Outlet, useLocation, useModel } from '@umijs/max';
import { Layout, Menu, message } from 'antd';
import { CarouselPositionCode } from 'common/utils/data';
import { CSSProperties, useEffect, useRef, useState } from 'react';

const iconProps = { style: { fontSize: 16 } };

const menus = [
  {
    label: '我的HiFi系统',
    path: '/hifi-system',
    icon: <IdcardTwoTone {...iconProps} />,
  },
  {
    label: '云试听',
    path: '/cloud-audition',
    icon: <CustomerServiceTwoTone {...iconProps} />,
  },
  {
    label: 'AI调音定制',
    path: '/mixer',
    icon: <ControlTwoTone {...iconProps} />,
  },
  // {
  //   label: '我的目标曲线',
  //   path: '/mixer-huihifi',
  //   icon: <ControlFilled {...iconProps} style={{color: 'var(--primary-color)', ...iconProps.style}} />,
  // },
  {
    label: '写文章',
    path: '/article',
    icon: <EditTwoTone {...iconProps} />,
  },
  {
    label: '个人资料',
    path: '/base',
    icon: <IdcardTwoTone {...iconProps} />,
  },
  /*{
    label: '评论',
    path: '/comment',
  },*/
  {
    label: '消息',
    path: '/message',
    icon: <MessageTwoTone {...iconProps} />,
  },
  {
    label: '安全',
    path: '/safe',
    icon: <SafetyCertificateTwoTone {...iconProps} />,
  },
];

export default function Personal() {
  const { pathname } = useLocation();

  useEffect(() => {
    if (!tokenStorage.get()) {
      message.warning({
        content: '请先登录',
        key: '请先登录',
      });
      history.replace('/home');
    }
  }, []);

  const { setCollapse, collapse } = useModel('personal.model');

  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);

  useEffect(() => {
    const key = menus.find(
      (item) => `/personal${item.path}` === pathname,
    )?.path;
    setSelectedKeys(key ? [key] : []);
  }, [pathname]);

  const imageStyleRef = useRef<CSSProperties>({
    objectFit: 'fill',
  });

  return (
    <div className="flex absolute top-0 left-0 right-0 bottom-0">
      <Layout className="h-full">
        <Layout.Sider
          theme="light"
          collapsible
          collapsed={collapse}
          onCollapse={setCollapse}
          trigger={
            collapse ? (
              <RightSquareTwoTone style={{ fontSize: 24 }} />
            ) : (
              <LeftSquareTwoTone style={{ fontSize: 24 }} />
            )
          }
          css={css`
            .ant-layout-sider-trigger {
              position: absolute;
            }
          `}
        >
          <Menu
            mode="inline"
            selectedKeys={selectedKeys}
            onSelect={({ key }) => {
              setSelectedKeys([key]);
            }}
            items={menus.map((item) => {
              return {
                ...item,
                key: item.path,
                label: (
                  <Link
                    to={{
                      pathname: `/personal${item.path}`,
                    }}
                  >
                    {item.label}
                  </Link>
                ),
              };
            })}
          />
        </Layout.Sider>
        <Layout.Content className="mx-[16px] my-[16px] flex flex-col">
          <AdBanner
            positionCode={CarouselPositionCode.PERSONAL_TOP}
            width="100%"
            wrapClassName="mb-[16px]"
            imageStyle={imageStyleRef.current}
          />
          <div id="scroll-container" className="overflow-auto flex-1 min-h-0">
            <Outlet />
          </div>
        </Layout.Content>
      </Layout>
    </div>
  );
}
